<template>
  <div class="index_wrap">
       <vue-particles
        color="#fff"
        :particleOpacity="0.7"
        :particlesNumber="200"
        shapeType="circle"
        :particleSize="4"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      >
      </vue-particles>
    <div class="index_mian">
      <div v-if="logintype == 1">
        <sigin @hanldlogin="hanldlogin"></sigin>
      </div>
      <div v-if="logintype == 2">
        <register @hanldlogin="hanldlogin"></register>
      </div>
    </div>
  </div>
</template>
<script>
import sigin from "../../components/login/sigin.vue";
import register from "../../components/login/register.vue";
export default {
  components: {
    sigin,
    register
  },
  data() {
    return {
      loginform: {
        username: "",
        userpass: "",
      },
      logintype: 1,
    };
  },
  methods: {
    hanldlogin(val) {
      this.logintype = val;
    },
  },
};
</script>
<style scoped>
.index_wrap {
  width: 100%;
  min-width: 898px;
  min-height: 100vh;
  /* background-color: #f6f6f6; */
  display: flex;
  justify-content: center;
  align-items: center;
     background-image: linear-gradient(#17668D,#0B2E58);
}
.index_mian {
  min-width: 640px;
  min-height: 450px;
  background-color: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#particles-js {
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>